<template>
  <div class="user-register">
    <h1>创建您的账户</h1>
    <form @submit.prevent="registerUser">
      <div class="form-group">
        <label for="email">邮箱</label>
        <input type="email" id="email" v-model="email" required />
      </div>
      <div class="form-group">
        <label for="username">用户名</label>
        <input type="text" id="username" v-model="username" required />
      </div>
      <div class="form-group">
        <label for="password">密码</label>
        <input type="password" id="password" v-model="password" required />
      </div>
      <div class="checkbox-group">
        <input type="checkbox" id="updates" v-model="updates" />
        <label for="updates">发送产品更新和公告</label>
      </div>
      <button type="submit">注册</button>
      <p>已有账户？<router-link to="/login">登录</router-link></p>
    </form>
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { registerUser as apiRegisterUser } from '../services/api';

const email = ref('');
const username = ref('');
const password = ref('');
const updates = ref(false);
const router = useRouter();

const registerUser = async () => {
  const userData = {
    email: email.value,
    username: username.value,
    password: password.value,
    updates: updates.value,
  };

  try {
    const response = await apiRegisterUser(userData);
    console.log('注册成功:', response.data);
    router.push('/login');
  } catch (error) {
    // console.error('错误:', error);
    ElMessage.error('注册失败: ' + error.message);
  }
};
</script>

<style scoped>
.user-register {
  max-width: 400px;
  margin: 100px auto;
  padding: 20px;
  background: transparent; /* 背景透明 */
  color: #f3f4f6; /* 字体颜色 */
}

h1 {
  text-align: center;
  margin-bottom: 20px;
  font-size: 24px; /* 字体大小 */
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc; /* 边框颜色 */
  border-radius: 4px;
  background: #111827; /* 输入框背景 */
  color: #f3f4f6;
  transition: border-color 0.3s;
}

input:focus {
  border-color: #3450ff; /* 聚焦时边框颜色 */
  outline: none;
}

.checkbox-group {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  max-width: 100%; /* 确保不超出输入框宽度 */
}

.checkbox-group input {
  margin-right: 10px; /* 增加复选框与标签之间的间距 */
  flex-shrink: 0; /* 防止复选框缩小 */
}

.checkbox-group label {
  flex-grow: 1; /* 标签占据剩余空间 */
  white-space: nowrap; /* 防止换行 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 超出部分用省略号表示 */
}

button {
  width: 100%;
  padding: 10px;
  background: #3450ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s;
}

button:hover {
  background: #2440db;
}

p {
  text-align: center;
  margin-top: 15px;
}
</style>
